<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: lyj
 * @LastEditTime: 2022-01-06 16:27:32
-->
// 导入图表
<template>
  <!--1. 容器 -->
  <div ref="right3_container" style="height: 95%"></div>
</template>
<script>
// 2. 导入图表构造函数
import { Line } from "@antv/g2plot";

export default {
  data() {
    return {};
  },
  mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
    this.initChart();
  },

  methods: {
    // 1. 初始化图表
    initChart() {
      const data = [
        { time: "2022-01-01", humidity: 49 },
        { time: "2022-01-02", humidity: 33 },
        { time: "2022-01-03", humidity: 56 },
        { time: "2022-01-04", humidity: 25 },
        { time: "2022-01-05", humidity: 67 },
        { time: "2022-01-06", humidity: 26 },
        { time: "2022-01-07", humidity: 40 },
      ];
      const line = new Line(this.$refs.right3_container, {
        data,
        xField: "time",
        yField: "humidity",
        color: "l(90) 0:#D1D1FF 1:#7C82EA",
        xAxis: {
          label: {
            offset: 10,
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },

          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },
        line: {
          color: "#84d4fb",
        },
        smooth: true,
      });
      line.render();
    },
  },
};
</script>
